<template>
  <div>
    <Row class="header" type="flex" justify="start">
      <Col span="24">
        <img class="icon" src='@/assets/images/pie1.png'/>
        <span class="title">社工人数统计扇形图</span>
      </Col>
    </Row>
    <br>
    <div id="personSumPieEchart" ref="personSumPieEchart" :style="{ width: width + 'px', height: height + 'px'}"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
import {off, on} from "@/libs/tools";

export default {
  name: 'PersonSumPieEchart',
  data () {
    return {
      myChart:null,
      chartData: [],
      centerData: [],
    }
  },
  props: {
    width: {
      type: Number,
      default: () => {
        return 300
      }
    },
    height: {
      type: Number,
      default: () => {
        return 500
      }
    },
    props: {
      showType: {
        type: String,
        default: () => {
          return 'pc'
        }
      }
    }
  },
  mounted () {
    // this.centerData = this.showType === 'pc' ? ['50%', '50%'] : ['60%', '40%']
    this.centerData = ['50%', '50%']
    // this.chart()
  },
  beforeDestroy () {
    off(window, 'resize', this.resize)
  },
  methods: {
    resize () {
      console.log('屏幕尺寸发生pie变化')
      this.myChart.resize()
    },
    chart (data) {
          this.chartData = data
          let option = {
            color: [
             "#C894E5" ,
              "#1A5FFF",
             "#B40001",
              "#FF3704",
              "#FFAB04",
              "#40DE60",
              "#6B47FF",
               "#19D8DF",
              "#449156",
               "#8097B5",
              "#FFD240",
              "#1470E9" ,
              "#19D8DF"],
            title: {
              text: ''
            },
            textStyle: {
              // color: '#bababa'
            },
            legend: {
              top: '1%',
              left: 'left',
              x:'center',
              y: 'top',
              itemWidth:15,
              itemHeight:15,
              // itemStyle:{
              //
              // }
            },
            tooltip: {
              trigger: 'item',
              backgroundColor: 'rgba(50,50,50,0.6)',
              // formatter: '{a} <br/>{b} : {c} ({d}%)'
              formatter: function (params, ticket, callback) {
                return params.value.region + ': ' + params.value.number + '人  (' + params.percent + '%)'
              },
            },
            dataset: {
              source: []
            },
            series: [
              {
                avoidLabelOverlap:true,
                x:'center',
                y:'15%',
                type: 'pie',
                // radius: '55%',
                radius: ['50%', '80%'],
                center: this.centerData,
                 // color: [
                 //   new echarts.graphic.LinearGradient(1,0,0,0,[{ offset: 0, color: "#C894E5" }, { offset: 1, color: "#FFFFFF" }],false),
                 //   new echarts.graphic.LinearGradient(1,0,0,0,[{ offset: 0, color: "#FFFFFF" }, { offset: 1, color: "#1A5FFF" }],false),
                 //   new echarts.graphic.LinearGradient(1,0,0,0,[{ offset: 0, color: "#FFFFFF" }, { offset: 1, color: "#B40001" }],false),
                 //   new echarts.graphic.LinearGradient(1,0,0,0,[{ offset: 0, color: "#FF3704" }, { offset: 1, color: "#FFFFFF" }],false),
                 //   new echarts.graphic.LinearGradient(1,0,0,0,[{ offset: 0, color: "#FFAB04" }, { offset: 1, color: "#FFFFFF" }],false),
                 //   new echarts.graphic.LinearGradient(1,0,0,0,[{ offset: 0, color: "#40DE60" }, { offset: 1, color: "#FFFFFF" }],false),
                 //   new echarts.graphic.LinearGradient(1,0,0,0,[{ offset: 0, color: "#6B47FF" }, { offset: 1, color: "#FFFFFF" }],false),
                 //   new echarts.graphic.LinearGradient(1,0,0,0,[{ offset: 0, color: "#19D8DF" }, { offset: 1, color: "#FFFFFF" }],false),
                 //   new echarts.graphic.LinearGradient(1,0,0,0,[{ offset: 0, color: "#449156" }, { offset: 1, color: "#FFFFFF" }],false),
                 //   new echarts.graphic.LinearGradient(1,0,0,0,[{ offset: 0, color: "#8097B5" }, { offset: 1, color: "#FFFFFF" }],false),
                 //   new echarts.graphic.LinearGradient(1,0,0,0,[{ offset: 0, color: "#FFD240" }, { offset: 1, color: "#FFFFFF" }],false),
                 //   new echarts.graphic.LinearGradient(1,0,0,0,[{ offset: 0, color: "#1470E9" }, { offset: 1, color: "#FFFFFF" }],false),
                 //   new echarts.graphic.LinearGradient(1,0,0,0,[{ offset: 0, color: "#19D8DF" }, { offset: 1, color: "#FFFFFF" }],false)
                 // ],
                label: {
                  normal: {
                    minShowLabelAngle:50,
                    show: true,
                    formatter: function (params, ticket, callback) {
                      const region = params.value.region + '(' + params.percent + '%)'
                      return `{regionStyle|${region}}{count|${params.value.number}}{regionStyle|人}`
                      // '{a|这段文本采用样式a}',
                      // return params.value.region + ': ' + params.value.number + '人  (' + params.percent + '%)'
                    },
                    rich:{
                      regionStyle:{
                        align: 'left',
                        fontSize: 12,
                        color:'#515151'
                      },
                      count:{
                        height:30,
                        align: 'left',
                        fontSize: 12,
                        color:'#b40001'
                      },
                      person:{
                        align: 'left',
                        fontSize: 10,
                        color:'#515151'
                      }

                    }
                  },
                  emphasis: {
                    show: true,
                    textStyle: {
                      fontSize: '16',
                    }
                  }
                },
                itemStyle: {
                  lineStyle:{
                    color:'red'
                  },
                  // 通常情况下：
                  normal: {
                    // color: function (colors) {
                    //   const colorList = [
                    //     '#fc8251',
                    //     '#5470c6',
                    //     '#91cd77',
                    //     '#ef6567',
                    //     '#f9c956',
                    //     '#75bedc',
                    //     '#fc8251',
                    //     '#5470c6',
                    //     '#91cd77',
                    //     '#ef6567',
                    //     '#f9c956',
                    //     '#75bedc',
                    //     '#fc8251',
                    //   ];
                    //   debugger
                    //   return colorList[colors.dataIndex];
                    // }
                  },
                  // 鼠标悬停时：
                  emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 30,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                },
                encode: {
                  itemName: 'region',
                  value: 'sum'
                }
              }
            ]
          }
          this.chartData.forEach(item => {
            option.dataset.source.push(item)
          })
           this.myChart = echarts.init(document.getElementById('personSumPieEchart'))
      console.log('渲染地图了')
      this.myChart.setOption(option)
      on(window, 'resize', this.resize())
    }
  }
}
</script>

<style scoped>
  .header {
    height: 30px;
  }
#personSumPieEchart{
  text-align: center;
}
  .icon {
    /*font-size: 28px;*/
    /*font-weight: 600;*/
    margin-right: 5px;
  }

  .title {
    font-size: 14px;
    text-align: left;
    color: #161616;
  }
</style>
